<template>
  <div class="mymap" id="Calendar" v-on-echart-resize></div>
</template>

<script>
import '@/chart.resize'
export default {
  data() {
    return {
      // 这是2020二月份日历和range月份相配
      date: ['2020-02-01', '2020-02-02', '2020-02-03', '2020-02-05'],
      pieRadius: '25',
      pieInitialized: true
    }
  },
  created() {
    this.$nextTick(function () {
    })
  },
  methods: {
    getPieSeries(scatterData, chart) {
      return this.$echarts.util.map(scatterData, (item, index) => {
        const center = chart.convertToPixel('calendar', item)
        return {
          id: index + 'pie',
          type: 'pie',
          center: center,
          label: {
            normal: {
              formatter: '{c}',
              position: 'inside'
            }
          },
          radius: this.pieRadius,
          data: [
            { name: '工作', value: Math.round(Math.random() * 24) },
            { name: '娱乐', value: Math.round(Math.random() * 24) },
            { name: '睡觉', value: Math.round(Math.random() * 24) }
          ]
        }
      })
    },
    getVirtulData() {
      const date = +this.$echarts.number.parseDate('2020-01-01')
      const end = +this.$echarts.number.parseDate('2020-12-01')
      const dayTime = 3600 * 24 * 1000
      const data = []
      for (var time = date; time < end; time += dayTime) {
        data.push([
          this.$echarts.format.formatTime('yyyy-MM-dd', time),
          Math.floor(Math.random() * 10000)
        ])
      }
      return data
    },
    getPieSeriesUpdate(scatterData, chart) {
      return this.$echarts.util.map(scatterData, function (item, index) {
        const center = chart.convertToPixel('calendar', item)
        return {
          id: index + 'pie',
          center: center
        }
      })
    },

    Calendar() {
      // 解决部分指向问题/或者用箭头函数解决指向问题
      const that = this
      // 方框的大小
      const cellSize = [70, 70]

      const scatterData = this.getVirtulData()

      const option = {
        tooltip: {},
        legend: {
          data: ['工作', '娱乐', '睡觉'],
          bottom: 20
        },
        calendar: {
          top: 'middle',
          left: 'center',
          orient: 'vertical',
          cellSize: cellSize,
          splitLine: {
            lineStyle: {
              color: '#a4a4a4'
            }
          },
          itemStyle: {
            borderColor: '#eee'
          },
          yearLabel: {
            show: false,
            textStyle: {
              fontSize: 30
            }
          },
          dayLabel: {
            margin: 15,
            firstDay: 1,
            nameMap: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
          },
          monthLabel: {
            show: false
          },
          range: ['2020-6']
        },
        series: [{
          id: 'label',
          type: 'scatter',
          coordinateSystem: 'calendar',
          symbolSize: 1,
          label: {
            normal: {
              show: true,
              formatter: function (params) {
                return that.$echarts.format.formatTime('dd', params.value[0])
              },
              offset: [-cellSize[0] / 2 + 10, -cellSize[1] / 2 + 10],
              textStyle: {
                color: '#000',
                fontSize: 14
              }
            }
          },
          data: scatterData
        }]
      }

      const myChart = this.$echarts.init(document.getElementById('Calendar'))
      myChart.setOption(option)
      console.log(option.series)

      window.setTimeout(() => {
        this.pieInitialized = true
        myChart.setOption({
          series: this.getPieSeries(scatterData, myChart)
        })
      }, 10)
    }
  },
  mounted() {
    this.Calendar()
  },
  watch: {
  }
}
</script>

<style>
</style>
